<template>
  <div id="process" style="width: 100%; height: 600px;"></div>
</template>

<script>
  import * as echarts from 'echarts'

  export default {
    name: "ProcessDetail",
    props: {
      // 流程节点数据
      data: {
        type: Array,
        default: () => []
      },
      // 用户列表
      userList: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {

      }
    },
    watch: {
      'data': {
        handler() {
          this.drawProcess()
        },
        deep: true
      }
    },
    mounted() {
      this.drawProcess()
    },
    methods: {
      /** 绘制流程图 */
      drawProcess() {
        let links = []
        let data = []
        for (let i = 0; i < this.data.length; i++) {
          if (this.data[i+1] && this.data[i+1].label) {
            links.push({source: this.data[i].label, target: this.data[i + 1].label})
          }
          let names = []
          for (let j = 0; j < this.data[i].examinerId.length; j++) {
            let users = this.userList.filter(v => v._id === this.data[i].examinerId[j])
            names = users.map(v => v.name)
          }
          data.push({
            name: this.data[i].label,
            value: names.join('，'),
            x: 300 * i,
            y: 300})
        }

        const process = echarts.init(document.getElementById('process'))
        const option = {
          tooltip: {},
          animationDurationUpdate: 1500,
          animationEasingUpdate: 'quinticInOut',
          series: [
            {
              type: 'graph',
              layout: 'none',
              symbolSize: 90,
              roam: true,
              label: {
                show: true,
                fontSize: 16
              },
              edgeSymbol: ['circle', 'arrow'],
              edgeSymbolSize: [4, 10],
              edgeLabel: {
                fontSize: 20
              },
              data,
              links
            }
          ]
        }
        process.setOption(option)
        window.addEventListener('resize', () => process.resize(), false)
      }
    }
  }
</script>

<style scoped lang="scss">
  .process-container {

  }
</style>
